﻿<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>SVG网页波浪动画效果背景 www.bootstrapmb.com</title>
 
<link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<main>
  <svg class="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 762 52.917" preserveAspectRatio="none">
    <defs>
      <path id="wave" d="M0 0c22.863 0 40.637 25.93 63.5 25.93S104.137 0 127 0s40.637 25.93 63.5 25.93S231.137 0 254 0s40.637 25.93 63.5 25.93S358.137 0 381 0s40.637 25.93 63.5 25.93S485.137 0 508 0s40.637 25.93 63.5 25.93S612.137 0 635 0s40.637 25.93 63.5 25.93S739.137 0 762 0v52.917H0z" fill="purple"></path>
    </defs>
    <g>
      <use href="#wave"></use>
    </g>
    <g transform="translate(761 0)">
      <use href="#wave"></use>
    </g>
  </svg>
  <svg class="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 762 52.917" preserveAspectRatio="none">
    <defs>
      <path id="wave" d="M0 0c22.863 0 40.637 25.93 63.5 25.93S104.137 0 127 0s40.637 25.93 63.5 25.93S231.137 0 254 0s40.637 25.93 63.5 25.93S358.137 0 381 0s40.637 25.93 63.5 25.93S485.137 0 508 0s40.637 25.93 63.5 25.93S612.137 0 635 0s40.637 25.93 63.5 25.93S739.137 0 762 0v52.917H0z" fill="purple"></path>
    </defs>
    <g>
      <use href="#wave"></use>
    </g>
    <g transform="translate(761 0)">
      <use href="#wave"></use>
    </g>
  </svg>
  <svg class="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 762 52.917" preserveAspectRatio="none">
    <defs>
      <path id="wave" d="M0 0c22.863 0 40.637 25.93 63.5 25.93S104.137 0 127 0s40.637 25.93 63.5 25.93S231.137 0 254 0s40.637 25.93 63.5 25.93S358.137 0 381 0s40.637 25.93 63.5 25.93S485.137 0 508 0s40.637 25.93 63.5 25.93S612.137 0 635 0s40.637 25.93 63.5 25.93S739.137 0 762 0v52.917H0z" fill="purple"></path>
    </defs>
    <g>
      <use href="#wave"></use>
    </g>
    <g transform="translate(761 0)">
      <use href="#wave"></use>
    </g>
  </svg>
</main>
<footer></footer>
 

</body>
</html>
